<template>
	<view>
		<view>
			<view class="head">
				<image class="img" src="../../../static/image/VCG21gic19970851@2x.png"></image>
				<view class="name">{{uname}}</view>
				<view class="shebei">在线设备：{{deviceLength}}个</view>
			</view>
			<view class="add">已添加的设备</view>
			<scroll-view scroll-y="true" class="list_l">
				<view class="list" v-for="(de,index) in device" :key="index">
					<!-- <view class="list" @click="details(de)"> -->
					<view class="list_s" @click="details(de)">
						<view class="image">
							<image :src="de.iconUrl"></image>
						</view>
						<view class="text">{{de.name}}</view>
						<!-- <view class="text">门磁</view> -->
					</view>

					<view class="tiem">
						<view class="dd" @click="showMenus">...</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 点击... -->
		<view class="zhez" v-show="showMenu" @click="remove">
			<view class="more">
				<view>更多</view>
				<hr />
				<view @click="jianc">设备信号检测</view>
				<hr />
				<view @click="cancel">取消</view>
			</view>
		</view>


		<view class="tianjia" @click="showAdds">
			<view>
				<image src="../../../static/image/jiahao.png" mode="aspectFit"></image>
			</view>
			<view>
				<!-- <text>添加子设备</text> -->
				<view>添加子设备</view>
			</view>
		</view>
		<!-- 添加子设备弹窗 -->
		<view class="zi" v-show="showAdd">

			<view class="zishebeiAdd">
				<image src="../../../static/image/cha.png" class="cha" @click="re" ></image>
				<view class="zishebeiAdds">
					<view class="ziSheBeiTitle">请确认子设备已处于配网模式(指示灯快闪)</view>
					<view class="ziSheBeiASubhead">若设备指示灯未闪烁,请先重置设备，以下是一些常见子设备的重置方式：</view>
					<view class="ziSheBeiList">
						<image src="../../../static/image/ClearData_03.jpg"></image>
						<view class="ziList">
							<view class="ziListTitle"><text>传感器</text>接通电源，长按复位键(开关)5秒</view>
						</view>
					</view>
					<hr />
					<view class="ziSheBeiList">
						<image src="../../../static/image/ClearData_03.jpg"></image>
						<view class="ziList">
							<view class="ziListTitle"><text>插座</text>接通电源，长按复位键(开关)5秒</view>
						</view>
					</view>
					<hr />
					<view class="ziSheBeiList">
						<image src="../../../static/image/ClearData_03.jpg"></image>
						<view class="ziList">
							<view class="ziListTitle"><text>光源</text>接通电源，开-关-开-关-开</view>
						</view>
					</view>
					<view class="gd" >查看更多设备重置方式 ></view>
				</view>
				<hr />
				<button class="butt" @click="submit" >指示灯在快闪</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeId:"",
				uname: "",
				devId: "",
				device: [],
				name: "",
				deviceLength: "0",
				showMenu: false,
				showAdd: false
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.devId = option.devId;
			// console.log("di",option.devId)
			this.name = option.name;
			this.uname = option.uname;
			this.homeId = option.homeId
			// console.log(this.homeId)

		},
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			// this.shebei();
			// this.title();
			this.zishebei();
			this.tt();
		},
		methods: {
			
			tt(){
				var a= {"name":"aa","age":"sad"}
				for (let key in a){
					console.log(key)
				}
			},
			
			// title() {
			// 	uni.setNavigationBarTitle({
			// 		title: ""
			// 	});
			// },
			onNavigationBarButtonTap(e) {
				// console.log(device.devId)
				uni.showLoading({
					title: '正在跳转到涂鸦官方设备详情界面'
				});
				try {
					const module = uni.requireNativePlugin("LJY-DeviceManageModule") //调用android中自定义的插件名称
					//跳转到涂鸦设备详情
					module.goPanelWithDeviceDetail({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: this.devId
					});
					uni.hideLoading(); //加载结束
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
				}

			},
			zishebei() {
				try {
					uni.showLoading({
						title: '正在加载设备列表'
					});
					let deviceLengths = 0
					const deviceManageModule = uni.requireNativePlugin("LJY-DeviceManageModule"); //调用android中自定义的插件名称
					const ret = deviceManageModule.getSubDevList({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: this.devId
					});
					uni.hideLoading(); //加载结束
					if (ret.code == 0) {
						// let device=JSON.parse(ret.data); 
						this.device = ret.data;
						for (let i = 0; i < this.device.length; i++) { //添加数组值
							if (this.device[i].isOnline == true) {
								deviceLengths++
							}
						}
						this.deviceLength = deviceLengths
					} else { //加载失败
						uni.showToast({
							title: ret.msg,
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '设备列表加载失败,请稍后再试',
						duration: 2000
					});
				}
			},
			details(device) {
				// console.log(this.devId)
				// uni.showLoading({
				// 	title: '正在跳转到涂鸦官方设备详情界面'
				// });
				// try {
				// 	const module = uni.requireNativePlugin("LJY-DeviceManageModule") //调用android中自定义的插件名称
				// 	//跳转到涂鸦设备详情
				// 	module.goPanelWithCheckAndTip({ //login表示自定义插件的函数名，第一个表示要传递的参数
				// 		deviceId: device.devId,
				// 		homeId:this.homeId
				// 	});
				// 	uni.hideLoading(); //加载结束
				// } catch (e) { //如果涂鸦智能无法连接
				// 	uni.hideLoading(); //加载结束
				// }
					console.log("deviceId："+this.devId);
					console.log("测试2："+this.homeId)
					//获取当前Activity
					  const main = plus.android.runtimeMainActivity();
					   //通过反射获取Android的Intent对象
					  const Intent = plus.android.importClass("android.content.Intent");
					  //通过宿主上下文创建 intent
					  const intent = new Intent(main.getIntent());
					  //设置要开启的Activity包类路径  com.HBuilder.integrate.MainActivity换掉你自己的界面
					  intent.setClassName(main, "io.dcloud.application.activity.DeviceControlPanelActivity");
					  //开启新的任务栈 （跨进程）
					  intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
					  //向原生界面传值操作
					  intent.putExtra("deviceId",device.devId);
					  intent.putExtra("homeId",this.homeId);
					  console.log(this.homeId)
					  //开启新的界面
					  main.startActivity(intent);
					 //请求码保证了，开始的新界面和返回的是同一个操作
					var CODE_REQUEST=1000
					//采用startActivityForResult开启新的界面，当界面关闭时可以处理返回结果， CODE_REQUEST请求码是唯一标识
					main.startActivityForResult(intent,CODE_REQUEST);
					console.log("新页面已经加载出来")
			},
			submit(){
				uni.navigateTo({
					url: '/pages/smartHome/home/scan?homeId=' + this.homeId  + '&devId=' + this.devId
				});
			},
			jianc() {
				uni.navigateTo({

				});
			},
			remove() {
				this.showMenu = false
			},
			showMenus() {
				this.showMenu = true
			},
			cancel() {
				this.showMenu = false
			},
			showAdds() {
				this.showAdd = true
			},
			re(){
				this.showAdd = false
			}
		}
	}
</script>

<style lang="less">
	.img {
		width: 100%;
	}

	.name {
		position: absolute;
		font-size: 45rpx;
		color: #FFFFFF;
		top: 15%;
		margin-left: 20rpx;
	}

	.shebei {
		position: absolute;
		font-size: 30rpx;
		color: #FFFFFF;
		top: 25%;
		margin-left: 20rpx;
	}

	.zhez {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 102000000000000;
		background: rgba(0, 0, 0, .3);
	}

	.more {
		background-color: #fefefe;
		width: 100%;
		height: 300rpx;
		// border-radius: 60rpx;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		position: fixed;
		top: 78%;
		z-index: 99999;

		view {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		hr {
			border: none;
			height: 3px;
			background-color: #f9f9f9;
		}
	}

	.dd {
		font-size: 80rpx;
	}

	.tianjia {
		// background: #007AFF;
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #ebebeb;
		background-color: #FFFFFF;
		color: #555500;
		justify-content: center;
		// position: fixed;
		// position: absolute;
		// position: relative;
		// top: 90%;
		// z-index: 99999;
		// float: inherit;

		view {
			font-size: 40rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.add {
		margin-left: 20rpx;
		// color: #c4c5c8;
	}

	//列表
	.list_l {
		width: 100%;
		// background: #007AFF;
		height: 810rpx;
	}

	.list_s {
		display: flex;
	}

	.list {
		border-radius: 30rpx;
		// background-color: #007AFF;
		border-bottom: 3rpx solid #ebebeb;
		background-color: #FFFFFF;
		height: 160rpx;
		display: flex;
		width: 95%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.image {
		height: 0rpx;
		// background-color: #007AFF;
		background-color: #fefefe;
		margin: 30rpx 30rpx 0rpx 30rpx;

		image {
			height: 100rpx;
			width: 100rpx;

		}
	}

	.text {
		line-height: 160rpx;
		font-size: 25rpx;
	}

	.tiem {
		display: flex;
		margin-top: 30rpx;
		margin-right: 30rpx;
		line-height: 90rpx;
		margin-left: auto;

		height: 90rpx;
		width: 200rpx;

		image {
			margin-top: 25rpx;
			margin-left: 20rpx;
			height: 40rpx;
			width: 40rpx;
		}

		.lixian {
			font-size: 80rpx;
			line-height: 90rpx;
			height: 90rpx;
			width: 200rpx;
			// color: #FFFFFF;
		}

		view {
			margin-left: auto;
			margin-right: 30rpx;
			// background-color: #333333;
			color: #bababa;
			font-size: 80rpx;
		}
	}

	.zi {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 102000000000000;
		background: rgba(0, 0, 0, .3);

	}

	.zishebeiAdd {
		background-color: #fefefe;
		width: 85%;
		height: 1100rpx;
		position: fixed;
		top: 10%;
		margin-left: 50rpx;
		// top: 0;
		border-radius: 40rpx;

		// z-index: 99999;
		hr {
			border: none;
			height: 3px;
			background-color: #e4e4e4;
			margin-top: 30rpx;
		}

	}

	.cha {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: -30rpx;
		top: -70rpx;
	}

	.zishebeiAdds {

		width: 90%;
		height: 800rpx;
		// background-color: #007AFF;
		margin-left: 35rpx;
		margin-top: 50rpx;

		// border-bottom: 3px solid #e3e3e3;
		hr {
			border: none;
			height: 3px;
			background-color: #f3f3f3;
			margin-top: 30rpx;
		}
	}

	.ziSheBeiTitle {
		font-size: 40rpx;
		color: #2a2e34;
		margin: 0;
		font-variant: small-caps;
		font-weight: bold;
	}

	.ziSheBeiASubhead {
		color: #828a8a;
		margin-top: 20rpx;
		font-size: 32rpx;
	}

	.ziSheBeiList {
		margin-top: 50rpx;
		display: flex;

		image {
			width: 80rpx;
			height: 80rpx;
		}

	}

	.ziSheBeiList .ziList {
		display: flex;

		view {
			margin-left: 15rpx;
			font-size: 27rpx;
			margin-left: 20rpx;
			color: #9a9aa0;
		}
	}

	.ziListTitle {
		text {
			font-size: 40rpx;
			padding-right: 10rpx;
			color: #22262c;
		}

	}

	.gd {
		text-align: center;
		margin-top: 80rpx;
		color: #37abfe;
	}

	.butt {
		margin-top: 60rpx;
		width: 70%;
		border-radius: 40rpx;
		background-color: #fe5927;
		color: #fcf4f0;
	}
</style>
